<script lang="ts" setup>
import type { SliderAttr } from '@/definitions/type'
import { InputNumber, Slider } from 'ant-design-vue'
import { effectScope, ref, watch } from 'vue'

defineOptions({
  name: 'SliderProp',
  inheritAttrs: true,
})
const props = withDefaults(defineProps<SliderAttr>(), {
  min: 0,
})
defineEmits<{
  'update:value': [value: number]
}>()
const inputValue = ref(props.value)
const scope = effectScope(true)
scope.run(() => {
  watch(() => props.value, () => {
    inputValue.value = props.value
  })
})
</script>

<template>
  <div class="flex flex-row items-center gap-2 font-normal text-sm text-main-app justify-between w-full leading-5">
    <div class="flex-none text-right flex-none" style="min-width: 3em;">
      {{ label }}
    </div>
    <div class="flex-1 flex flex-row justify-end items-center">
      <Slider v-model:value="inputValue" :min="min" :max="max" class="flex-1" @change="$emit('update:value', $event as any)" />
      <InputNumber v-model:value="inputValue" :min="min" :max="max" class="ml-4 flex-none" @change="$emit('update:value', $event as any)" />
    </div>
  </div>
</template>
